<template>
  <div class="articles-container">
    <el-card>
      <!-- 表头 -->
      <el-form
        :inline="true"
        class="demo-form-inline"
        label-width="80px"
        :model="articles_pagination"
      >
        <el-row>
          <!-- 关键词 -->
          <el-col :span="5">
            <el-form-item label="关键词" prop="keyword">
              <el-input v-model="articles_pagination.keyword"></el-input>
            </el-form-item>
          </el-col>
          <!-- 状态 -->
          <el-col :span="5">
            <el-form-item label="状态" prop="state">
              <el-select
                placeholder="请选择"
                v-model="articles_pagination.state"
              >
                <el-option label="开启" value="1"></el-option>
                <el-option label="屏蔽" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 清除和搜索按钮 -->
          <el-col :span="5">
            <el-form-item>
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-col>
          <!-- 新增技巧 -->
          <el-col :span="9">
            <el-row type="flex" justify="end">
              <el-button
                type="success"
                icon="el-icon-edit"
                @click="articlessaddhowDialog = true"
                >新增技巧</el-button
              >
            </el-row>
          </el-col>
        </el-row>
      </el-form>

      <!-- 中间数据显示 -->
      <el-alert
        :title="`数据一共 ${articles_pagination.counts}条`"
        type="info"
        :closable="false"
        show-icon
        class="zhongjian"
      >
      </el-alert>

      <!-- table表格 -->
      <el-table :data="articles" class="articles-table">
        <el-table-column
          label="序号"
          type="index"
          width="100px"
        ></el-table-column>
        <el-table-column label="文章标题" width="400px">
          <template slot-scope="{ row }">
            {{ row.title }}
            <i
              class="el-icon-film"
              style="color: blue"
              v-if="row.videoURL"
              @click="videodialog(row)"
            ></i>
          </template>
        </el-table-column>
        <el-table-column label="阅读数" prop="visits"> </el-table-column>
        <el-table-column label="录入人" prop="username"> </el-table-column>
        <el-table-column label="录入时间">
          <template slot-scope="{ row }">
            {{ row.createTime }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="{ row }">
            {{ row.state === 1 ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250px" style="padding: 10px">
          <template slot-scope="{ row }">
            <el-link
              type="primary"
              style="padding-left: 10px"
              @click="lookArticles(row)"
              >预览</el-link
            >
            <el-link
              type="primary"
              style="padding-left: 10px"
              @click="changeState(row.id)"
            >
              {{ jingyonglink ? "启用" : "禁用" }}
            </el-link>
            <el-link
              type="primary"
              style="padding-left: 10px"
              :disabled="jingyonglink"
              @click="modify(row.id)"
              >修改</el-link
            >
            <el-link
              type="primary"
              style="padding-left: 10px"
              :disabled="jingyonglink"
              @click="deleted(row.id)"
            >
              删除
            </el-link>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-col :span="12">
          <el-pagination
            background
            layout="prev, pager, next,sizes,jumper"
            :total="articles_pagination.counts"
            @size-change="articlesSizeChange"
            @current-change="articlesCurrentChange"
            :page-size="articles_pagination.pagesize"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>

    <!-- 视频弹层 -->
    <el-dialog :visible.sync="videovisible" width="70%" @close="closeDialog">
      <video
        :src="videoUrl"
        controls
        autoplay
        class="video"
        width="100%"
      ></video>
    </el-dialog>

    <!-- 预览文章弹层 -->
    <article_preview
      :articlesshowDialog.sync="articlesshowDialog"
      :articles="lookeObj"
    />

    <!-- 新增文章弹层 -->
    <articles_add
      v-if="articlessaddhowDialog"
      :articlessaddhowDialog.sync="articlessaddhowDialog"
      :articlesdeatil="detail"
    />
  </div>
</template>

<script>
import { list, remove, detail, changeState } from "../../api/hmmm/articles";
import article_preview from "../../module-hmmm/components/articles-preview.vue";
import articles_add from "../../module-hmmm/components/articles-add.vue";
export default {
  name: "articles",
  components: {
    article_preview,
    articles_add,
  },
  data() {
    return {
      articlessaddhowDialog: false, //新增文章弹层
      jingyonglink: false, //禁用
      articlesshowDialog: false, //预览文章弹层
      videovisible: false, //默认视频弹层关闭
      videoUrl: "", //视频地址
      articles: {
        state: 0,
      },
      lookeObj: {},
      articles_pagination: {
        counts: 0, //总数据数
        page: 1, //当前页数
        pagesize: 10, //页尺寸，每页显示
        keyword: null, //关键词
        state: "", //状态  1开启 0屏蔽
      },
      detail: {}, //详细
    };
  },
  created() {
    this.getArticles();
  },
  methods: {
    //渲染页面
    async getArticles() {
      this.articles = [];
      const { data } = await list({
        page: this.articles_pagination.page,
        pagesize: this.articles_pagination.pagesize,
      });
      data.items.forEach((item) => {
        const newData = new Date(item.createTime).toLocaleString();
        item.createTime = newData.replace(/\//gi, "-");
      });
      this.articles = data.items;
      // console.log(this.articles);
      this.articles_pagination.counts = data.counts;
      this.videoUrl = data.items.videoURL;
    },
    //页码大小
    articlesSizeChange(newpagesize) {
      this.articles_pagination.page = 1;
      this.articles_pagination.pagesize = newpagesize;
      this.getArticles();
    },
    //当前页码变动
    articlesCurrentChange(newpage) {
      this.articles_pagination.page = newpage;
      this.getArticles();
    },
    // 搜索
    search() {
      this.articles_pagination.page = 1;
      this.getArticles();
      this.$message.success("搜索成功");
    },
    //清除
    clear() {
      this.articles_pagination = {
        keyword: null, //关键词
        state: null, //状态  1开启 0屏蔽
      };
      this.getArticles();
      this.$message.success("清除成功");
    },
    // 视频播放
    videodialog(row) {
      this.videovisible = true;
      // 将接受的值赋值给src
      this.videoUrl = row.videoURL;
    },
    //视频播放结束
    closeDialog() {
      // 关闭弹框
      this.isShow = false;
      this.videoUrl = ""; // 清空数据 关闭视频播放
    },
    //删除
    async deleted(id) {
      try {
        await this.$confirm("你确定删除该吗");
        await remove({ id: id });
        console.log(id);
        this.getArticles();
        this.$message.success("删除成功");
      } catch (error) {
        console.log(error);
      }
    },
    // 预览
    lookArticles(item) {
      this.lookeObj = item;
      this.articlesshowDialog = true;
    },

    //修改
    async modify(id) {
      if (id) {
        const { data } = await detail({ id: id });
        this.detail = data;
        this.articlessaddhowDialog = true;
        getArticles()
      }
    },
    //文章状态
    async changeState(id) {
      this.jingyonglink = !this.jingyonglink;
      await changeState({
        id: id,
        state: this.jingyonglink ? 0 : 1,
      });
      this.getArticles();
    },
  },
};
</script>

<style scoped lang="scss">
.articles-container {
  margin: 20px 10px;
  .zhongjian {
    margin-bottom: 10px;
  }
  .articles-table {
    margin-bottom: 20px;
  }
}
</style>
